import React, { useMemo } from "react";
import { NavLink } from "react-router-dom";
import { useLocation } from "react-router";
import { router } from "@/router";
type propsTypes = {};

function Menu(props: propsTypes) {
  const navigation = useLocation();
  // console.log(router, "----");
  // const getHomeRouter = () => {
  //   const child = router.find((item) => item.name === "首页")?.children || [];
  //   return child.find((item) => item?.path && navigator.pathname?.includes(item.path));
  // };
  //  先看父路由是否有自路由再看自路由是否包含 当前路由包含的话返回 父路由
  const getParantPath = useMemo(
    () =>
      router.find(
        (item) => item?.children && item?.children.some((v) => v.path && navigation?.pathname?.includes(v.path)),
      )?.path,
    [router, navigation],
  );
  // console.log(getParantPath, "-----");

  return (
    <div className="w-full min-w-max">
      {router.map((item) => (
        <NavLink
          key={item.path}
          to={item.path || ""}
          className={({ isActive }) => {
            return `mx-3 py-3 ${isActive || getParantPath === item.path ? "text-black border-b-4 border-blue-600" : "text-slate-500"} hover:text-black`;
          }}
        >
          {item.name}
        </NavLink>
      ))}
    </div>
  );
}

export default Menu;
